<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width  initial-scale=1.0  maximum-scale=1.0 minimum-scale=1.0  user-scalable=no"/>  
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <title>KindEditor Test</title>
        <link href="app.css" type="text/css" rel="stylesheet">
        <script src="./jquery-1.11.1.min.js"></script>

        <meta charset="utf-8">
    </head>
    <body>
        <h1 id="type">KindEditor Test</h1>

        <form method="post" action="../php/demo.php">
        <textarea id='editor' class='editor' name="editor" cols="100" rows="20" style="width:100%;height:200px;"></textarea>

        <input type="button" onclick="getHtml()" value='获取html内容'>

        <script src="../kindeditor-all.js"></script>

        <script>
            //document.domain = 'domain.com';

            KindEditor.plugin('addImage', function(K) {
                var editor = this, name = 'addImage', title = 'addImage';

                // 点击图标时执行
                editor.clickToolbar(name, function() {
                    editor.blur();
                });
            });

            KindEditor.lang({
                addImage : '添加图片'
            });

            KindEditor.ready(function(K) {
                window.editor = K.create('.editor', {
                    items : [
                        'addImage', 'undo', 'redo', '|', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 
                        'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat',
                        '|', 'emoticons', 'image', 'multiimage', 'media', 'insertfile', 'table', 'hr', 'baidumap',
                        'link', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist',
                        'insertunorderedlist', 'subscript', 'iew', 'print', 'selectall', 'fullscreen'
                    ],
                    langType : 'zh-CN',
                    autoHeightMode : true
                });

                editor.focus();
                editor.insertHtml('<p></p>');

                var addImage = document.getElementsByClassName('ke-icon-addImage')[0];
                addImage.innerHTML = '<input style="opacity:0;width:25px;padding:0;" class="edui-image-file" type="file" hidefocus="" name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp">';


                var input = document.querySelector('input[class=edui-image-file]'); // see Example 4

                input.onchange = function () {
                    var file = input.files[0];

                    var imgURL = URL.createObjectURL(file),
                    img = document.createElement('img');

                    img.onload = function() {
                        URL.revokeObjectURL(imgURL);
                    };

                    img.src = imgURL;
                    img.className = 'image-phone';

                    editor.insertHtml(img.outerHTML);

                    editor.insertHtml('<p></p>');
                    editor.focus();

                    input.value = '';
                };
            });

            $('.edui-image-file').click(function() {
                this.blur();
            });

            function getHtml(){
                alert(editor.html())
            }
            
        </script>

        </form>
    </body>
</html>
